<!DOCTYPE html>
<html>
<head>
    <title>CNC driver</title>

    <link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../libs/font-awesome-4.2.0/css/font-awesome.min.css">
    <style>
        html, body {
            height: 100%;
            position: relative;
        }

        body {
            line-height: normal;
            display: flex;
            flex-direction: column;
            padding: 0;
            margin: 0;
        }

        #header {
            height: 104px;
            background-color: black;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: flex-start;
            border-bottom: solid gray;
            border-left: solid gray;
            border-right: solid gray;
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .control {
            margin-left: auto;
            display: flex;
            background-color: white;
            border-bottom-right-radius: 12px;
        }

        .controlButtons {
            display: flex;
        }

        .position {
            height: 100%;
            float: left;
            text-align: left;
        }

        .posAxis {
            text-align: right;
            width: 9ex;
            font-weight: bold;
            font-size: 23px;
        }

        .axisOffset {
            text-align: right;
            width: 9ex;
            font-size: 80%;
        }

        .positionHeader th {
            font-size: 70%;
            font-weight: normal;
            text-align: center;
        }

        .xyBlock {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .zBlock {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .controlParams {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: space-around;
        }

        .units {
            vertical-align: bottom;
            padding-right: 15px;
            text-align: right;
            font-size: 60%;
            min-height: 18px;
        }

        #loader {
            display: inline-block;
        }

        th {
            text-align: end;
        }

        #webView {
            flex: 1;
            border: none;
            background: #000;
        }

        .camPanel {
            flex: 1;
            display: flex;
            flex-direction: column;
            border: solid gray 3px;
            border-top: none;
            border-top-right-radius: 15px;
            border-top-left-radius: 15px;
            background: #000;
            color: lightgray;
        }

        .mainDiv {
            height: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
        }

        #header.connected {
            background-color: blue;
        }

        .estopframe {
            box-sizing: initial;
            width: 100px;
            height: 61px;
            position: relative;
            color: white;
            background: #eee;
            font-size: large;
            font-weight: bold;
            padding-top: 43px;
            text-align: center;
            line-height: 20px;
        }

        .estopframe:before {
            box-sizing: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            border-bottom: 29px solid #eee;
            border-left: 29px solid white;
            border-right: 29px solid white;
            width: 42px;
            height: 0;
        }

        .estopframe:after {
            box-sizing: initial;
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            border-top: 29px solid #eee;
            border-left: 29px solid white;
            border-right: 29px solid white;
            width: 42px;
            height: 0;
        }

        .estopframe.estop, .estopframe.tool-probe {
            box-sizing: initial;
            background: orangered;
            color: black;
            -webkit-animation-name: blinker;
            -webkit-animation-duration: 1s;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;

            -moz-animation-name: blinker;
            -moz-animation-duration: 1s;
            -moz-animation-timing-function: ease-in-out;
            -moz-animation-iteration-count: infinite;
            -moz-animation-direction: alternate;

            animation-name: blinker;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .estopframe.estop:before, .estopframe.tool-probe:before {
            border-bottom-color: orangered;
        }

        .estopframe.estop:after, .estopframe.tool-probe:after {
            border-top-color: orangered;
        }

        @keyframes blinker {
            0% {
                color: black;
            }
            100% {
                color: white;
            }
        }

        @-moz-keyframes blinker {
            0% {
                color: black;
            }
            100% {
                color: white;
            }
        }

        @-webkit-keyframes blinker {
            0% {
                color: black;
            }
            100% {
                color: white;
            }
        }

        .io {
            flex-flow: column;
        }

        .spindle {
            border-radius: 3px;
            border: white 3px solid;
        }

        .spindle.spindle-running {
            background-color: orange;
            border: orange 3px solid;
        }

        .spindle.spindle-up-to-speed button {
            color: green;
        }

        .socket {
            border-radius: 3px;
            border: white 3px solid;
        }

        .socket button {
            width: 100%;
        }

        .socket.socket-on {
            background-color: orange;
            border: orange 3px solid;
        }

        .fa {
            color: #555;
        }

        .axis {
            background-color: yellow;
        }

        .axis input::-webkit-outer-spin-button,
        .axis input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        .axis.homed {
            background: inherit;
        }

        .axis.limit {
            background-color: orangered;
        }

        .button-block {
            flex-grow: 3;
            display: flex;
            justify-content: space-between;
        }

        .home {
            float: right;
        }

    </style>
    <link rel="shortcut icon" href="../images/icon_fraise_48.png"/>
</head>
<body id="body">

</body>
<script src="../libs/require.js"></script>
<script src="../config.js"></script>
<script>
	requirejs.config({ baseUrl: '../' });
</script>
<script src="js/cncDriver.js"></script>
</html>